<template>
  <div class="home-container">
    <!-- 销售数据 -->
    <div class="sales-data-section">
      <h2 class="section-title">销售数据</h2>
      <el-row :gutter="16" class="sales-cards">
        <el-col
          :xs="24"
          :sm="12"
          :md="12"
          :lg="12"
          :xl="4"
          v-for="item in salesData"
          :key="item.label"
          class="mb-16px"
        >
          <el-card shadow="hover" class="sales-card">
            <div class="sales-card-content">
              <div class="sales-label">{{ item.label }}</div>
              <div class="sales-value">{{ item.value }}</div>
              <div class="sales-trend" :class="item.trend > 0 ? 'trend-up' : 'trend-down'">
                <Icon :icon="item.trend > 0 ? 'ep:top' : 'ep:bottom'" />
                环比上周 {{ Math.abs(item.trend) }}%{{ item.trend > 0 ? '+' : '-' }}
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 门店销售对比分析 -->
    <div class="store-comparison-section mt-20px">
      <el-card shadow="never">
        <template #header>
          <div class="section-header">
            <h3>门店销售对比分析</h3>
          </div>
        </template>
        <Echart :options="storeComparisonOptions" :height="400" />
      </el-card>
    </div>

    <!-- 平台数据统计 -->
    <div class="platform-stats-section mt-20px">
      <h2 class="section-title">平台数据统计</h2>

      <el-row :gutter="16">
        <!-- 分享转化率 -->
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb-16px">
          <el-card shadow="never">
            <template #header>
              <div class="section-header">
                <h3>分享转化率</h3>
              </div>
            </template>
            <Echart :options="conversionRateOptions" :height="350" />
          </el-card>
        </el-col>

        <!-- 用户分享行为分析 -->
        <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6" class="mb-16px">
          <el-card shadow="never">
            <template #header>
              <div class="section-header">
                <h3>用户分享行为分析</h3>
              </div>
            </template>
            <Echart :options="shareBehaviorOptions" :height="350" />
          </el-card>
        </el-col>

        <!-- 积分发放 -->
        <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6" class="mb-16px">
          <el-card shadow="never">
            <template #header>
              <div class="section-header">
                <h3>积分发放</h3>
              </div>
            </template>
            <Echart :options="pointsIssuanceOptions" :height="350" />
          </el-card>
        </el-col>
      </el-row>

      <!-- 分享商品排行榜 -->
      <el-row :gutter="16" class="mt-16px">
        <el-col :span="24">
          <el-card shadow="never">
            <template #header>
              <div class="section-header">
                <h3>分享商品排行榜</h3>
              </div>
            </template>
            <div class="ranking-list">
              <div v-for="(item, index) in productRanking" :key="index" class="ranking-item">
                <div class="ranking-left">
                  <div class="ranking-medal" :class="`medal-${index + 1}`">
                    <span v-if="index < 3">
                      <Icon
                        :icon="
                          index === 0
                            ? 'noto:1st-place-medal'
                            : index === 1
                              ? 'noto:2nd-place-medal'
                              : 'noto:3rd-place-medal'
                        "
                        :size="24"
                      />
                    </span>
                    <span v-else class="ranking-number">{{ index + 1 }}</span>
                  </div>
                  <span class="product-name">{{ item.name }}</span>
                </div>
                <div class="ranking-right">
                  <div class="progress-bar">
                    <div class="progress-fill" :style="{ width: item.percentage + '%' }"></div>
                  </div>
                  <span class="product-value">{{ item.value.toLocaleString() }}</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { EChartsOption } from 'echarts'

defineOptions({ name: 'Home' })

// 销售数据
const salesData = reactive([
  { label: '销售总额', value: '¥1,236.98', trend: 12.88 },
  { label: '商品销售总数', value: '167,890', trend: 12.88 },
  { label: '退货率', value: '1.63%', trend: -5.23 },
  { label: '退货订单数', value: '1,630', trend: -8.45 },
  { label: '退款金额', value: '¥1,236.98', trend: -6.32 }
])

// 门店销售对比分析
const storeComparisonOptions = reactive<EChartsOption>({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['自营店', '农场']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['一月', '二月', '三月', '四月', '五月', '六月']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '自营店',
      type: 'bar',
      data: [82, 45, 38, 65, 95, 42],
      itemStyle: {
        color: '#5470c6'
      }
    },
    {
      name: '农场',
      type: 'bar',
      data: [35, 28, 48, 52, 88, 48],
      itemStyle: {
        color: '#fac858'
      }
    }
  ]
})

// 分享转化率
const conversionRateOptions = reactive<EChartsOption>({
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['微信', '朋友圈']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '微信',
      type: 'line',
      data: [45, 38, 52, 48, 55, 62, 58, 48, 52, 58, 65],
      smooth: true,
      itemStyle: {
        color: '#5470c6'
      }
    },
    {
      name: '朋友圈',
      type: 'line',
      data: [68, 72, 65, 78, 85, 82, 88, 75, 78, 82, 85],
      smooth: true,
      itemStyle: {
        color: '#91cc75'
      }
    }
  ]
})

// 用户分享行为分析
const shareBehaviorOptions = reactive<EChartsOption>({
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['微信好友', '朋友圈', '微博']
  },
  series: [
    {
      name: '分享渠道',
      type: 'pie',
      radius: '70%',
      data: [
        { value: 76, name: '微信好友', itemStyle: { color: '#5470c6' } },
        { value: 24, name: '朋友圈', itemStyle: { color: '#91cc75' } },
        { value: 24, name: '微博', itemStyle: { color: '#fac858' } }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
})

// 积分发放
const pointsIssuanceOptions = reactive<EChartsOption>({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['第一季度', '第二季度', '第三季度', '第四季度']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '积分',
      type: 'bar',
      data: [320, 440, 392, 350],
      itemStyle: {
        color: '#5470c6'
      }
    }
  ]
})

// 分享商品排行榜
const productRanking = reactive([
  { name: '商品名称', value: 12323234, percentage: 100 },
  { name: '商品名称', value: 10234567, percentage: 83 },
  { name: '商品名称', value: 8567890, percentage: 70 },
  { name: '商品名称', value: 6789012, percentage: 55 },
  { name: '商品名称', value: 4567890, percentage: 37 },
  { name: '商品名称', value: 2345678, percentage: 19 }
])
</script>

<style scoped lang="scss">
// 响应式调整
@media (width <= 768px) {
  .sales-card-content {
    .sales-value {
      font-size: 24px !important;
    }
  }

  .ranking-right {
    flex-direction: column;
    align-items: flex-end !important;
    gap: 8px !important;

    .progress-bar {
      width: 100%;
    }
  }
}

.home-container {
  padding: 20px;
}

.section-title {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.section-header {
  h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #303133;
  }
}

// 销售数据卡片
.sales-cards {
  display: flex;
  flex-wrap: wrap;
}

.sales-card {
  height: 100%;
  transition: transform 0.3s;

  &:hover {
    transform: translateY(-5px);
  }

  .sales-card-content {
    padding: 10px 0;
    text-align: center;

    .sales-label {
      margin-bottom: 12px;
      font-size: 14px;
      color: #909399;
    }

    .sales-value {
      margin-bottom: 8px;
      font-size: 28px;
      font-weight: 600;
      color: #303133;
    }

    .sales-trend {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      font-size: 13px;

      &.trend-up {
        color: #67c23a;
      }

      &.trend-down {
        color: #f56c6c;
      }
    }
  }
}

// 商品排行榜
.ranking-list {
  .ranking-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #ebeef5;

    &:last-child {
      border-bottom: none;
    }

    .ranking-left {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 1;

      .ranking-medal {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;

        .ranking-number {
          font-size: 16px;
          font-weight: 600;
          color: #909399;
        }
      }

      .product-name {
        font-size: 14px;
        color: #606266;
      }
    }

    .ranking-right {
      display: flex;
      align-items: center;
      gap: 16px;
      flex: 2;

      .progress-bar {
        height: 8px;
        overflow: hidden;
        background-color: #ebeef5;
        border-radius: 4px;
        flex: 1;

        .progress-fill {
          height: 100%;
          background: linear-gradient(to right, #409eff, #67c23a);
          border-radius: 4px;
          transition: width 0.3s;
        }
      }

      .product-value {
        min-width: 100px;
        font-size: 14px;
        font-weight: 600;
        color: #303133;
        text-align: right;
      }
    }
  }
}
</style>
